<script setup lang="ts">
import { useAuthStore } from '@/stores/user-auth'
import router from '@/router'
import { AppAuthProvider } from '@/service/firebase'
import Routes from '@/router/routes'

const store = useAuthStore()

async function signInWithGoogle() {
  await signIn(AppAuthProvider.Google)
}

async function signInWithApple() {
  await signIn(AppAuthProvider.Apple)
}

async function signInWithFacebook() {
  await signIn(AppAuthProvider.Facebook)
}

async function signIn(provider: AppAuthProvider) {
  await store.signIn(provider)
  const returnRoute = router.currentRoute.value.redirectedFrom ?? { name: Routes.home }
  await router.replace(returnRoute)
}

function onClose() {
  router.back()
}
</script>

<template>
  <div class="login-page">
    <img class="close" src="@/assets/images/ic_close_light_shadow.png" alt="close" @click="onClose">
    <div class="welcome">
      <img class="logo" src="@/assets/images/logo.svg" alt="Spellai">
      <p class="welcome-text">WELCOME<br>TO THE<br><span class="highlight">IMAGINATIVE</span><br>WORLD.</p>
    </div>
    <div class="options">
      <div class="login-button" @click="signInWithApple">
        <img src="@/assets/images/ic_apple_light.png" alt="">Continue with Apple
      </div>
      <div class="login-button" @click="signInWithGoogle">
        <img src="@/assets/images/ic_google_light.png" alt="">Continue with Google
      </div>
      <div class="login-button" @click="signInWithFacebook">
        <img src="@/assets/images/ic_facebook_light.png" alt="">Continue with Facebook
      </div>
      <p class="policy">
        Logging in indicates that you have read and agreed to our
        <a href="https://aimirror.fun/spellai/spell_ai" target="_blank" class="policy-highlight">
          Terms of Service & Privacy Policy
        </a>.
      </p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.login-page {
  height: 100%;
  background: url("@/assets/images/bg_login.jpg") no-repeat;
  background-size: 100%;

  .close {
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    left: 0.68rem;
    top: 3rem;
  }

  .welcome {
    padding-top: 7.5rem;
    padding-left: 1.36rem;

    .logo {
      height: 3rem;
    }
  }

  .welcome-text {
    font-size: 2.3rem;
    font-weight: 800;
    color: white;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    margin-top: 1rem;
    line-height: 1.26;

    .highlight {
      color: var(--color-primary);
      font-weight: bold;
    }
  }

  .options {
    margin: 3rem 1rem 0;

    .login-button {
      border: 1px solid white;
      border-radius: 7px;
      width: 100%;
      color: white;
      margin-top: 1rem;
      padding: 10px 2em;
      font-size: 1.2rem;
      font-weight: bold;
      display: flex;

      img {
        height: 2rem;
        width: 2rem;
        margin-right: 10px;
      }
    }
  }

  .policy {
    color: #B6B6C9;
    font-size: 0.8rem;
    text-align: center;
    margin-top: 10px;

    .policy-highlight {
      color: var(--color-primary);
    }
  }
}
</style>